<template>
  <div>
    <div class="head-container">
      <el-row>
        <el-col :span="24">
          <div class="head-item-container">
            当前报表：{{ reporttitle }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"><span class="demonstration">报表类型:</span></div></el-col>
            <el-col :span="6">
              <span class="demonstration">品类:</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-select
                ref="datetype"
                v-model="datetype"
                name="datetype"
                placeholder="请选择报表类型"
                @change="conditionChange"
              >
                <el-option
                  v-for="item in datetypes"
                  :key="item.code"
                  :label="item.title"
                  :value="item.code"
                />
              </el-select></el-col>
            <el-col :span="6"><el-select
              ref="producttype"
              v-model="producttype"
              name="producttype"
              placeholder="请选择品类"
            >
              <el-option
                v-for="item in producttypes"
                :key="item.code"
                :label="item.title"
                :value="item.code"
              />
            </el-select></el-col>
          </el-row>

        </el-col>

        <el-col :span="12">
          <el-row>
            <el-col :span="6"><span class="demonstration">日期范围:</span></el-col>
          </el-row><el-row>
            <el-col :span="6"><el-date-picker
              v-model="datevalue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2"
            /></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div class="chart-container"><chart
      ref="childChart"
      height="100%"
      width="100%"
      :option="option"
    /></div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/DyPie'
import { getPieSeries } from '@/api/chart'

export default {
  name: 'DyPieChart',
  components: { Chart },
  data() {
    return {
      series: [],
      reporttitle: '活跃用户报表',
      datetype: 'd',
      datetypes: [
        { code: 'y', title: '年报' },
        { code: 'q', title: '季报' },
        { code: 'm', title: '月报' },
        { code: 'w', title: '周报' },
        { code: 'd', title: '日报' }
      ],
      producttype: null,
      producttypes: [
        { code: '1', title: '手机' },
        { code: '2', title: '电脑' },
        { code: '3', title: '汽车' },
        { code: '4', title: '媒体' }
      ],
      datevalue: null,
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    option: {
      // getter
      get: function() {
        return { title: {
          text: '标题',
          subtext: 'sub title',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: this.series
        }
      },
      // setter
      set: function(newValue) {
        // this.$refs.childChart.option = this.option
      }
    }},
  mounted() {
    this.getData(this.datetype)
    // this.$refs.childChart.initChart()
  },
  methods: {
    conditionChange() {
      this.getData(this.datetype)
    },

    getData(datetype) {
      getPieSeries(datetype).then(response => {
        this.series = response.data
        console.log('chart series:' + this.series)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.head-container {
  position: relative;

  .head-item-container {
    padding: 20px 5px 20px 0px;
    position: relative;
    @include clearfix;
    margin-bottom: 0px;
  }
}
</style>
